<template>
	<view class="code-login">
		<u-toast ref="uToast" />

		<view class="code-login__form">
			<u-form>
				<u-form-item left-icon="lock" prop="name">
					<u-input type="number" v-model="loginForm.phone" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item left-icon="lock" prop="name">
					<u-input placeholder="请输入图形验证码" v-model="loginForm.imageCode" type="number"></u-input>

					<image :src="imgCode" mode="" class="code-login__codeImage" @click="getImageCode()"></image>
				</u-form-item>
				<u-form-item left-icon="lock" prop="name">
					<u-input placeholder="请输入验证码" v-model="loginForm2.smsCode" type="number"></u-input>
					<text class="code-login__tip price-text" slot="right" @click="getCode">{{ codeTips }}</text>

				</u-form-item>
			</u-form>
			<u-button class="mt-36" type="primary" @click="submit">登录</u-button>
			<view class="mt-36 flex align-center justify-between">

				<text></text>
			</view>
		</view>
		<!-- <view class="flex justify-center code-login__footer">
			<text>登录即同意</text>
			<text class="code-login__footer--link">《用户隐私协议》</text>
		</view> -->
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeTips: "",
				imgCode: "",
				loginForm: {
					phone: null,
					imageCode: null,
					imageCodeId: null,
					smsType: "PHONE_SMS_CODE_LOGIN"
				},
				loginForm2: {
					phone: null,
					username: null,
					imageCode: null,
					imageGuid: null,
					smsCode: null,
					loginType: "APP_MOBILE_PHONE_CODE"
				}
			};
		},
		mounted() {
			console.log("code")

			this.getImageCode();
		},

		methods: {
			getImageCode() {
				this.loginForm.imageCodeId = new Date().getTime();
				this.imgCode = "http://118.31.238.190:9092/agent-api/common/getImageCode/" + this.loginForm.imageCodeId;

			},
			handleChangeType() {
				this.$emit("change", "password");
			},
			getCode() {
				const _self = this;
				if (_self.$refs.uCode.canGetCode) {
					if (_self.loginForm.phone === null) {
						this.$zx.msg("手机号不能为空");
						return;
					}
					if (_self.loginForm.imageCode === null) {
						this.$zx.msg("图形验证码不能为空");
						return;
					}

					uni.showLoading({
						title: "正在获取验证码",
						mask: true,
					});
					_self.$zx.user_api.sendVerifyCodeSms(_self.loginForm).then((data) => {
						console.log("data=" + data)
						uni.hideLoading();
						_self.$refs.uToast.show({
							title: "验证码已发送",
							type: "success",
						});
						//组件倒计时
						_self.$refs.uCode.start();
					});

				} else {
					this.$zx.msg("稍后再重试");
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			submit() {
				const _self = this;
				if (_self.loginForm.phone === null) {
					this.$zx.msg("手机号不能为空");
					return;
				}
				if (_self.loginForm.imageCode === null) {
					this.$zx.msg("图形验证码不能为空");
					return;
				}
				if (_self.loginForm2.smsCode === null) {
					this.$zx.msg("验证码不能为空");
					return;
				}
				_self.loginForm2.phone = _self.loginForm.phone;
				_self.loginForm2.username = _self.loginForm.phone;
				_self.loginForm2.imageCode = _self.loginForm.imageCode;
				_self.loginForm2.imageGuid = _self.loginForm.imageCodeId;
				this.$zx.user_api.phoneLogin(_self.loginForm2).then((data) => {
					console.log("data=" + JSON.stringify(data))
					uni.setStorageSync("token", data.token);
					uni.setStorageSync("user_info", data.agentUser);
					uni.setStorageSync("agentNo", data.currentIdentity.agentNo);
					data.userType = "staff";

					if (data.userType === "staff") {
						// 获取权限列表
						this.$zx.user_api.getUserInfo().then((info) => {
							uni.setStorageSync("permissions", info.permissions);
							uni.setStorageSync("user_info", info);
						});
					}

					uni.setStorageSync("login_role", data.userType);
					if (getCurrentPages().length === 1) {
						if (data.userType === "staff") {
							uni.reLaunch({
								url: "/pages/staff-home/staff-home",
							});
						}
						if (data.userType === "worker") {
							uni.reLaunch({
								url: "/pages/worker-home/worker-home",
							});
						}
					} else {
						uni.navigateBack({
							delta: 1,
						});
					}
				});
			},
		},
	};
</script>
<style scoped lang="scss">
	.code-login {
		height: 100%;
		position: relative;

		&__codeImage {
			width: 200rpx;
			height: 100rpx;
		}

		&__form {
			// width: 700rpx;
			// height: 400rpx;
			background-color: #ffffff;
			border-radius: 24rpx;
			margin: 0 auto;
			position: relative;


			padding: 28rpx;
			padding-top: 66rpx;
		}

		&__tip {
			color: #9D60FF;
			font-size: 26rpx;
		}

		&__footer {
			position: absolute;
			font-size: 24rpx;
			bottom: 50rpx;
			left: 220rpx;

			&--link {
				color: #9D60FF;
			}
		}
	}
</style>